<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	th:replace="fragments/generic-frame::frame(~{fragments/menu::menu(2)}, ~{::th}, ~{::tr}
	, ~{::form}, ~{::script})">
<head></head>
<body>
	<th>实验课程名称</th>
	<th>课程老师</th>
	<th>第几周开始</th>
	<th>第几周结束</th>
	<th>星期几上课</th>
	<th>第几节课</th>
	<th>课程状态</th>
	<th>操作</th>

	<tr th:each="experiment: ${list}">
		<th:block th:with="ex=${experiment.course}">
			<td><input type="checkbox" id="check-all" class="flat"></td>
			<td th:text="${ex.name}">Web高级编程</td>
			<td th:text="${experiment.teacher}">张恒锋</td>
			<td th:text="${ex.startweek}">10</td>
			<td th:text="${ex.endweek}">17</td>
			<td th:text="${ex.dayofweek}">1</td>
			<td th:text="${ex.lesson}">2</td>
			<td th:if="${ex.state==0}">还未通过审核</td>
			<td th:if="${ex.state==1}">审核通过</td>
			<td th:if="${ex.state==2}">审核不通过</td>
			<td th:if="${ex.state==3}">已结课</td>
			<td><a th:attr="data-id=${ex.no}" href="#"
				class="btn-sm btn-info" data-toggle="modal"
				data-target="#edit-modal">调整时间</a></td>
		</th:block>
	</tr>
	<form id="modal-form" action="time-arrange" method="post">
		<!-- 		每一个输入框都对应一个form-group -->
		<div class="form-group">
			<!-- 			label的for与input的id对应  -->
			<label for="startweek" class="control-label">第几周开始:</label>
			<!-- 			input的name  -->
			<input type="text" name="startweek" class="form-control"
				id="startweek">
		</div>

		<div class="form-group">
			<label for="endweek" class="control-label">第几周结束:</label> <input
				type="text" name="endweek" class="form-control" id="endweek">
		</div>

		<div class="form-group">
			<label for="dayofweek" class="control-label">星期几上课:</label> <input
				type="text" name="dayofweek" class="form-control" id="dayofweek">
		</div>

		<div class="form-group">
			<label for="lesson" class="control-label">第几节课:</label> <input
				type="text" name="lesson" class="form-control" id="lesson">
		</div>
		<input name="course" id="course" type="hidden" />
	</form>

	<script type="text/javascript">
		$(function() {
			// 這是固定写法，代表当弹窗弹出时会调用这个function
			$('#edit-modal').on('show.bs.modal', function(e) {
				var modal = $(e.currentTarget); // 弹窗对象
				// e.relatedTarget就是点击的那个按钮(就是点击的这个按钮触发的弹窗)
				// closest('tr')找到离这个按钮最近的一个tr标签
				// find('td')在这个tr标签里找到所有的td标签
				var btn = $(e.relatedTarget);
				var tds = btn.closest('tr').find('td');
				// 通过eq(index)来取第几个td(下标从0开始。注意每行都有一个checkbox，在第0个位置)
				// modal.find('#startweek') 代表在弹窗中找到id为startweek的标签，在这里它就是用来输入"第几周开始"的input标签，
				// 把对应行的数据填到这些input里，就完成了数据的传递。
				modal.find('#startweek').val(tds.eq(3).text());
				modal.find('#endweek').val(tds.eq(4).text());
				modal.find('#dayofweek').val(tds.eq(5).text());
				modal.find('#lesson').val(tds.eq(6).text());
				modal.find('#course').val(btn.data('id')); // data.('id')，代表取出btn中data-id这个属性的值
			});
		})
	</script>
</body>
</html>